<%@ page contentType="text/html;charset=UTF-8" language="java"
	session="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
.link {
	stroke: #ccc;
}

.node text {
	pointer-events: none;
	font: 8px sans-serif;
}
</style>

<script type="text/javascript"
	src="resources/scripts/jquery-1.8.2.min.js"></script>
<script src="resources/scripts/d3.v3.min.js"></script>

<html>

<head>
<title>Home</title>
</head>
<body>
	<div>

		<div id="big-search-wrap">
			<script>
				function clfun() {

					$.ajax({
						type : 'POST',
						url : 'college/populate',
						dataType : 'json',
						async : true,
						success : function(result) {
							//alert(result);
							//render();
						},
						error : function(jqXHR, textStatus, errorThrown) {
							alert(jqXHR.status + ' ' + jqXHR.responseText);
						}
					});
				}
			</script>

			<button type='button' onclick='clfun()'>Save</button>

			<script>
				function clfun2() {

					$.ajax({
						type : 'POST',
						url : 'college/clean',
						dataType : 'json',
						async : true,
						success : function(result) {
							//alert(result);
							//render();
						},
						error : function(jqXHR, textStatus, errorThrown) {
							alert(jqXHR.status + ' ' + jqXHR.responseText);
						}
					});
				}
			</script>

			<button type='button' onclick='clfun2()'>Clean</button>

			<script>
				var height = window.innerHeight;
				var width = window.innerWidth;

				var color = d3.scale.category20();

				var radius = d3.scale.sqrt().range([ 0, 6 ]);

				var svg = d3.select("body").append("svg").attr("width", width)
						.attr("height", height);

				var force = d3.layout.force().size([ width, height ]).charge(
						-600).linkDistance(function(d) {
					return 150;
				});
				function clfun1() {

					$.ajax({
						type : 'GET',
						url : 'college/get',
						dataType : 'json',
						async : true,
						success : function(graph) {

							addFixedCoOrdsToNodes(graph);
							force.nodes(graph.nodes).links(graph.links).on(
									"tick", tick).start();

							var link = svg.selectAll(".link").data(graph.links)
									.enter().append("g").attr("class", "link");

							link.append("line").style("stroke-width",
									function(d) {
										return 1 + "px";
									});

							link.filter(function(d) {
								return false;
							}).append("line").attr("class", "separator");

							link.append("text").attr("x", function(d) {
								return (d.source.x + d.target.x) / 2;
							}).attr("y", function(d) {
								return (d.source.y + d.target.y) / 2;
							}).attr("text-anchor", "middle").text(function(d) {
								return "yrs";
							});

							var node = svg.selectAll(".node").data(graph.nodes)
									.enter().append("g").attr("class", "node")
									.call(force.drag);

							node.append("image").attr("xlink:href",
									"https://github.com/favicon.ico").attr("x",
									-8).attr("y", -8).attr("width", 16).attr(
									"height", 16);

							node.append("text").attr("dx", 8).attr("dy",
									".30em").attr("class", "node text").text(
									function(d) {
										return d.name;
									});

							function tick() {
								link.selectAll("line").attr("x1", function(d) {
									return d.source.x;
								}).attr("y1", function(d) {
									return d.source.y;
								}).attr("x2", function(d) {
									return d.target.x;
								}).attr("y2", function(d) {
									return d.target.y;
								});

								node.attr("transform",
										function(d) {
											return "translate(" + d.x + ","
													+ d.y + ")";
										});
							}
						},
						error : function(jqXHR, textStatus, errorThrown) {
							alert(jqXHR.status + ' ' + jqXHR.responseText);
						}
					});
				}

				function addFixedCoOrdsToNodes(graph) {
					var groupedNodes = groupNodesByLevel(graph.nodes);
					var initX = 75;
					var initY = 200;

					var yStep = 75;
					var xStep = 100;

					for ( var j = 1; j <= groupedNodes.length; j++) {

						var perGrpArr = groupedNodes[j - 1];

						if (perGrpArr) {
							var curYCord = (initY - (yStep * (perGrpArr.length / 2)));
							
							if(curYCord <=0){
								curYCord=yStep;
							}
							
							var curXCord = initX;

							curXCord += j * xStep;

							for ( var k = 1; k <= perGrpArr.length; k++) {
								var curNode = perGrpArr[k - 1];
								curNode["fixed"] = true;
								curNode["x"] = curXCord;

								curNode["y"] = curYCord;
								curYCord += yStep;

								if (k % 2 == 0) {
									curYCord += 30;
								}

							}
						}

					}
				}

				function groupNodesByLevel(nodes) {

					var jsonData = [];

					for ( var i = 0; i < nodes.length; i++) {

						if (jsonData[nodes[i].level]) {
							jsonData[nodes[i].level].push(nodes[i]);
						} else {
							var nodeArr = [];
							nodeArr.push(nodes[i]);
							jsonData[nodes[i].level] = nodeArr;
						}

					}

					return jsonData;
				}
			</script>
			<button type='button' onclick='clfun1()'>Get</button>


			<div id='cy'></div>
		</div>
	</div>
</body>
</html>